import { defineComponent, onMounted } from "vue";
// @ts-ignore
import WordCloud from "wordcloud";

export default defineComponent({
  name: "WorldsCloud",
  props: {
    list: {
      type: Array
    }
  },
  setup(props) {
    let dom: HTMLElement;
    const getDom = (curDom: any) => {
      dom = curDom;
    };
    onMounted(() => {
      WordCloud(dom, {
        list: props.list,
        gridSize: 3, // 密集程度 数字越小越密集
        weightFactor: 1, // 字体大小=原始大小*weightFactor
        maxFontSize: 30, //最大字号
        minFontSize: 1, //最小字号
        fontWeight: "normal", //字体粗细
        fontFamily: "Times, serif", // 字体
        color: "random-light", // 字体颜色 'random-dark' 或者 'random-light'

        rotateRatio: 1 // 字体倾斜(旋转)概率，1代表总是倾斜(旋转
      });
    });
    return () => {
      return <div class="full" ref={getDom}></div>;
    };
  }
});
